<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工业废水监测系统</title>
    <style>
        /* 全局样式 - 调整页面布局 */
        body {
            font-family: 'Electrolize', sans-serif;
            margin: 0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: url('backgroud2.png') center/cover no-repeat;
            position: relative;
            padding: 20px;
        }

        body::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            z-index: -1;
        }

        .system-title {
            color: #00ffcc;
            text-shadow: 0 0 20px #00ffcc;
            font-size: 48px;
            margin-bottom: 30px;
            font-weight: bold;
            letter-spacing: 2px;
        }

        /* 调整主容器宽度和间距 */
        .main-container {
            display: flex;
            gap: 60px;
            width: 95%;
            max-width: 1400px;
            justify-content: center;
            margin-bottom: 30px;
        }

        /* 增大内容区域 */
        .content-wrapper {
            background: linear-gradient(135deg, rgba(0, 255, 204, 0.1), rgba(0, 255, 204, 0.05));
            padding: 35px;
            border-radius: 20px;
            box-shadow: 0 0 30px rgba(0, 255, 204, 0.5);
            width: 550px;
            text-align: center;
            border: 1px solid rgba(0, 255, 204, 0.3);
            backdrop-filter: blur(15px);
        }

        /* 其余样式保持不变... */
        h2 {
            color: #00ffcc;
            margin-bottom: 25px;
            text-shadow: 0 0 15px #00ffcc;
            font-size: 34px;
        }

        h3 {
            color: #00ffcc;
            margin-bottom: 15px;
            text-shadow: 0 0 10px #00ffcc;
            font-size: 22px;
        }

        input[type="text"] {
            width: 180px;
            padding: 18px;
            margin-bottom: 25px;
            border: 2px solid #00ffcc;
            border-radius: 10px;
            font-size: 22px;
            text-align: right;
            background-color: rgba(0, 0, 0, 0.7);
            color: #00ffcc;
            outline: none;
            box-shadow: 0 0 15px rgba(0, 255, 204, 0.3);
            transition: all 0.3s ease;
        }

        input[type="text"]:focus {
            border-color: #00cc99;
            box-shadow: 0 0 25px rgba(0, 255, 204, 0.6);
        }

        .radio-group {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-bottom: 25px;
        }

        .radio-group label {
            font-size: 20px;
            color: #00ffcc;
            display: inline-block;
            cursor: pointer;
            padding: 20px 40px;
            border: none;
            border-radius: 10px;
            background: linear-gradient(135deg, rgba(0, 255, 204, 0.2), rgba(0, 255, 204, 0.1));
            transition: all 0.3s ease;
            box-shadow: 0 0 10px rgba(0, 255, 204, 0.2);
        }

        .radio-group input[type="radio"] {
            display: none;
        }

        .radio-group input[type="radio"]:checked+label {
            background: linear-gradient(135deg, #00ffcc, #00cc99);
            color: #0f0c29;
            box-shadow: 0 0 20px rgba(0, 255, 204, 0.5);
        }

        .radio-group label:hover {
            background: linear-gradient(135deg, rgba(0, 255, 204, 0.4), rgba(0, 255, 204, 0.3));
            box-shadow: 0 0 20px rgba(0, 255, 204, 0.4);
        }

        fieldset {
            border: 2px solid #00ffcc;
            border-radius: 20px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 0 20px rgba(0, 255, 204, 0.3);
            position: relative;
        }

        fieldset::before {
            content: "";
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            border: 2px solid rgba(0, 255, 204, 0.1);
            border-radius: 20px;
            z-index: -1;
        }

        legend {
            font-size: 26px;
            font-weight: bold;
            color: #00ffcc;
            padding: 0 25px;
            text-shadow: 0 0 10px #00ffcc;
        }

        .button-container {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-top: 20px;
        }

        .action-btn {
            padding: 20px 40px;
            border: none;
            border-radius: 10px;
            background: linear-gradient(135deg, #00ffcc, #00cc99);
            color: #0f0c29;
            font-size: 22px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 0 20px rgba(0, 255, 204, 0.5);
            width: 300px;
        }

        .action-btn:hover {
            background: linear-gradient(135deg, #00cc99, #009973);
            transform: scale(1.05);
            box-shadow: 0 0 30px rgba(0, 255, 204, 0.8);
        }

        .row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .input-group {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 45%;
            margin: 0 10px;
        }

        .single-input {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
        }
    </style>
</head>

<body>
    <h1 class="system-title">工业废水监测系统</h1>

    <div class="main-container">
        <!-- MODBUS模块 -->
        <div class="content-wrapper">
            <fieldset>
                <legend>MODBUS信息采集</legend>
                <div class="row">
                    <div class="input-group">
                        <h3>PH值</h3>
                        <input type="text" id="modbus_ph" placeholder="" readonly>
                    </div>
                    <div class="input-group">
                        <h3>水流量</h3>
                        <input type="text" id="modbus_water" placeholder="" readonly>
                    </div>
                </div>
                <div class="row">
                    <div class="input-group">
                        <h3>CO2</h3>
                        <input type="text" id="modbus_co2" placeholder="" readonly>
                    </div>
                    <div class="input-group">
                        <h3>溶解氧</h3>
                        <input type="text" id="modbus_oxygen" placeholder="" readonly>
                    </div>
                </div>
            </fieldset>

            <fieldset>
                <legend>MODBUS设备状态</legend>
                <h3>阀门</h3>
                <div class="radio-group">
                    <input type="radio" name="modbus_valve" value="on" id="valve_on">
                    <label for="valve_on">ON</label>
                    <input type="radio" name="modbus_valve" value="off" id="valve_off">
                    <label for="valve_off">OFF</label>
                </div>

                <h3>净化</h3>
                <div class="radio-group">
                    <input type="radio" name="modbus_clean" value="on" id="clean_on">
                    <label for="clean_on">ON</label>
                    <input type="radio" name="modbus_clean" value="off" id="clean_off">
                    <label for="clean_off">OFF</label>
                </div>
            </fieldset>
        </div>

        <!-- STM32模块 -->
        <div class="content-wrapper">
            <fieldset>
                <legend>STM32信息采集</legend>
                <div class="single-input">
                    <h3>氮浓度</h3>
                    <input type="text" id="stm32_N" placeholder="" readonly>
                </div>
                <div class="single-input">
                    <h3>磷浓度</h3>
                    <input type="text" id="stm32_H" placeholder="" readonly>
                </div>
            </fieldset>

            <fieldset>
                <legend>STM32设备状态</legend>
                <h3>警报器</h3>
                <div class="radio-group">
                    <input type="radio" name="stm32_warn" value="on" id="warn_on">
                    <label for="warn_on">ON</label>
                    <input type="radio" name="stm32_warn" value="off" id="warn_off">
                    <label for="warn_off">OFF</label>
                </div>

                <h3>搅拌机</h3>
                <div class="radio-group">
                    <input type="radio" name="stm32_mixer" value="on" id="mixer_on">
                    <label for="mixer_on">ON</label>
                    <input type="radio" name="stm32_mixer" value="off" id="mixer_off">
                    <label for="mixer_off">OFF</label>
                </div>
            </fieldset>
        </div>
    </div>

    <div class="button-container">
        <button class="action-btn" onclick="refreshData()">刷新数据</button>
        <button class="action-btn" onclick="openVideoStream()">监控视频</button>
    </div>

    <script>
        // 状态缓存对象
        const stateCache = {
            // MODBUS信息采集
            101: null, // PH值
            102: null, // 水流量
            103: null, // CO2
            104: null, // 溶解氧

            // MODBUS设备控制状态
            105: null, // 阀门
            106: null, // 净化

            // STM32信息采集
            301: null, // 氮浓度
            302: null, // 磷浓度

            // STM32设备控制状态
            303: null, // 警报
            304: null  // 搅拌机
        };

        // 控制状态变更标志
        let controlStateChanged = false;
        // 最后一次用户操作的时间戳
        let lastUserActionTime = 0;
        // 用户操作冷却时间(毫秒)
        const USER_ACTION_COOLDOWN = 500;

        // 页面加载完成后初始化
        document.addEventListener("DOMContentLoaded", function() {
            refreshData(); // 初始获取数据

            // 每1秒自动获取数据
            setInterval(function() {
                refreshData();
            }, 1000);

            // 绑定控制按钮事件
            document.getElementById("valve_on").addEventListener("change", function() {
                if(this.checked && isCooldownOver()) {
                    handleControlChange(105, 1);
                }
            });
            document.getElementById("valve_off").addEventListener("change", function() {
                if(this.checked && isCooldownOver()) {
                    handleControlChange(105, 0);
                }
            });

            document.getElementById("clean_on").addEventListener("change", function() {
                if(this.checked && isCooldownOver()) {
                    handleControlChange(106, 1);
                }
            });
            document.getElementById("clean_off").addEventListener("change", function() {
                if(this.checked && isCooldownOver()) {
                    handleControlChange(106, 0);
                }
            });

            document.getElementById("warn_on").addEventListener("change", function() {
                if(this.checked && isCooldownOver()) {
                    handleControlChange(303, 1);
                }
            });
            document.getElementById("warn_off").addEventListener("change", function() {
                if(this.checked && isCooldownOver()) {
                    handleControlChange(303, 0);
                }
            });

            document.getElementById("mixer_on").addEventListener("change", function() {
                if(this.checked && isCooldownOver()) {
                    handleControlChange(304, 1);
                }
            });
            document.getElementById("mixer_off").addEventListener("change", function() {
                if(this.checked && isCooldownOver()) {
                    handleControlChange(304, 0);
                }
            });
        });

        // 检查是否过了冷却时间
        function isCooldownOver() {
            const now = Date.now();
            if (now - lastUserActionTime < USER_ACTION_COOLDOWN) {
                return false;
            }
            lastUserActionTime = now;
            return true;
        }

        // 处理控制状态变更
        function handleControlChange(key, state) {
            // 只有当状态确实改变时才发送控制指令
            if (stateCache[key] !== state) {
                controlDevice(key, state);
                stateCache[key] = state; // 更新缓存
                controlStateChanged = true;
            }
        }

        // 刷新数据函数
        function refreshData() {
            // 如果最近有控制状态变更，优先处理这些变更
            if (controlStateChanged) {
                controlStateChanged = false;
                return;
            }

            var xhr = new XMLHttpRequest();
            var url = "";

            var post_req = {
                "type": 1,
                "limit": "all"
            };

            xhr.open("POST", url, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    try {
                        var response = JSON.parse(xhr.responseText);
                        console.log("数据响应:", response);
                        updateUI(response.data);
                    } catch (e) {
                        console.error("解析JSON失败:", e);
                    }
                }
            };
            xhr.send(JSON.stringify(post_req));
        }

        // 设备控制函数 - 发送JSON格式
        function controlDevice(key, state) {
            var xhr = new XMLHttpRequest();
            var url = "";

            var controlData = {
                "type": 2,  // 控制指令类型
                "key": key,
                "state": state
            };

            console.log("控制请求:", controlData);

            xhr.open("POST", url, true);
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    console.log("控制响应:" + xhr.responseText);
                    // 控制成功后更新缓存
                    stateCache[key] = state;
                }
            };
            xhr.send(JSON.stringify(controlData));
        }

        // 更新UI界面
        function updateUI(dataItems) {
            if (!dataItems || !Array.isArray(dataItems)) return;

            dataItems.forEach(item => {
                // 只有当值发生变化时才更新UI
                if (stateCache[item.key] !== item.val) {
                    stateCache[item.key] = item.val; // 更新缓存

                    switch(item.key) {
                        // MODBUS信息采集
                        case 101: // PH值
                            document.getElementById("modbus_ph").value = item.val;
                            break;
                        case 102: // 水流量
                            document.getElementById("modbus_water").value = item.val;
                            break;
                        case 103: // CO2
                            document.getElementById("modbus_co2").value = item.val;
                            break;
                        case 104: // 溶解氧
                            document.getElementById("modbus_oxygen").value = item.val;
                            break;

                        // MODBUS设备控制状态
                        case 105: // 阀门
                            document.getElementById(item.val === 1 ? "valve_on" : "valve_off").checked = true;
                            break;
                        case 106: // 净化
                            document.getElementById(item.val === 1 ? "clean_on" : "clean_off").checked = true;
                            break;

                        // STM32信息采集
                        case 301: // 氮浓度
                            document.getElementById("stm32_N").value = item.val;
                            break;
                        case 302: // 磷浓度
                            document.getElementById("stm32_H").value = item.val;
                            break;

                        // STM32设备控制状态
                        case 303: // 警报
                            document.getElementById(item.val === 1 ? "warn_on" : "warn_off").checked = true;
                            break;
                        case 304: // 搅拌机
                            document.getElementById(item.val === 1 ? "mixer_on" : "mixer_off").checked = true;
                            break;
                    }
                }
            });
        }

        // 打开视频监控流
        function openVideoStream() {
            window.open("http://192.168.51.62:8080/stream_simple.html", "_blank", "width=800,height=600");
        }
    </script>

</body>

</html>
